<template>
  <q-footer class="video-footer row q-pa-sm justify-between items-center">
    <div class="row items-center col q-ml-md">
      <q-avatar size="40px" v-if="audio">
        <img :src="audio.creatorAvatar" />
      </q-avatar>
      <div class="column q-ml-sm">
        <div style="margin: 4px">{{ audio ? audio.creatorName : '' }}</div>
        <div class="row q-gutter-x-xs">
          <q-chip
            class="chip"
            square
            size="10px"
            style="color: #4595ef"
            v-if="audio && audio.isOriginal"
            >ORIGINAL</q-chip
          >
          <h-icon-num icon="mdi-star" :label="audio!.starCount" v-if="audio" />
          <lang-chip :code="audio.langCode" v-if="audio"></lang-chip>
        </div>
      </div>
    </div>
    <div class="column fit items-center col non-selectable">
      <div class="row justify-center items-center no-wrap full-width">
        <div class="current-play-time">{{ timeStr }}</div>
        <q-slider
          dense
          style="width: 80%"
          class="q-mx-sm"
          v-model="videoProgress"
          :min="0"
          :max="1"
          :step="0.01"
          color="white"
          thumb-size="3px"
        />
        <div class="total-play-time">{{ durationStr }}</div>
      </div>
      <div class="row">
        <q-btn
          padding="xs"
          flat
          icon="mdi-rewind-10"
          color="sub"
          @click="backwards"
          v-singular-event:btn:video-backwards
        />
        <q-btn padding="xs" flat icon="mdi-skip-previous" color="sub" />
        <q-btn
          padding="xs"
          flat
          :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"
          color="sub"
          @click="togglePlay"
          v-singular-event:btn:video-toggle-play
        />
        <q-btn padding="xs" flat icon="mdi-skip-next" color="sub" />
        <q-btn
          padding="xs"
          flat
          icon="mdi-fast-forward-10"
          color="sub"
          @click="forwards"
          v-singular-event:btn:video-forwards
        />
      </div>
    </div>
    <div class="row col items-center no-wrap">
      <q-btn
        fab-mini
        flat
        icon="mdi-volume-high"
        color="sub"
        v-singular-event:btn:video-change-volumn
      >
        <q-popup-proxy>
          <audio-volume-popup />
        </q-popup-proxy>
      </q-btn>
      <q-btn fab-mini flat icon="mdi-dots-horizontal" color="sub" />
    </div>
  </q-footer>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import LangChip from 'components/LanguageChip.vue';
import HIconNum from 'src/components/utils/HIconNum.vue';
import AudioVolumePopup from './AudioVolumePopup.vue';
import { useVideoStore } from 'src/stores/video-store';
const videoStore = useVideoStore();
const video = computed(() => videoStore.currentVideo);
const audio = computed(() => videoStore.currentAudio);
const time = computed<number>(() => videoStore.currentTime);
const duration = computed<number>(() => videoStore.duration);
const timeStr = computed<string>(() => videoStore.currentTimeStr);
const durationStr = computed<string>(() => videoStore.durationStr);
const isPlaying = computed<boolean>(() => videoStore.isPlaying);
const videoProgress = computed<number>({
  get() {
    return time.value / duration.value;
  },
  set(value) {
    videoStore.seekTo(value * duration.value);
  },
});
function togglePlay() {
  videoStore.togglePlay();
}
function backwards() {
  videoStore.backwards();
}
function forwards() {
  videoStore.forwards();
}
</script>
<style lang="sass" scoped>

.video-footer
  height: 80px
  background-image: linear-gradient(#212121, #141414)
  .chip
    padding: 0px 6px
    cursor: default
    margin: 0px
    height: 18px
</style>
